<template>
  <div>
    <h2>{{ device_dtl.device_name }}</h2>
    <div class="buttons">
      <button @click="nowdata">实时数据</button>
      <button @click="historydata">历史数据</button>
    </div>
    <div class="data-container">
      <div v-show="now_show" class="data-section">
        <h3>实时数据</h3>
        <ul>
          <li>
            获取时间: {{ CreateTime }}
          </li>
          <li v-for="(item, index) in message" :key="index">
            {{ item.name }}: {{ item.value }} {{ item.unit }}
          </li>
        </ul>
      </div>
      <div v-show="his_show" class="data-section">
        <h3>历史数据</h3>
        <div v-for="(item, index) in his_message" :key="index">
          <div v-for="(value, key) in item" :key="key">
            {{ key }}: {{ value }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/api/request';

export default {
  props: {
    device_dtl: {
      required: true
    }
  },
  data() {
    return {
      Url: null,
      his_Url: null,
      CreateTime: null,
      message: null,
      now_show: false,
      his_show: false,
      his_message: false
    }
  },
  methods: {
    nowdata() {
      this.now_show = !this.now_show;
      if (this.now_show) {
        this.his_show = false
        const business_id = this.device_dtl.business_id;
        const device_id = this.device_dtl.device_id;
        this.Url = "http://139.196.24.82/treatment/fields/deviceDataHandler?Version=2020-08-10&Business=" + business_id + "&Equipment=AJ0012931&RequestTime=1681722094&Value={ 'page': 1,'length': 5, 'deviceId': " + device_id + " }";
        request.get(this.Url).then(function (response) {
          this.message = response.data.data.deviceDataList;
          this.CreateTime = this.message[0].createTime;
        }.bind(this));
      }
    },
    historydata() {
      this.his_show = !this.his_show;
      if (this.his_show) {
        this.now_show = false
        const deviceId = this.device_dtl.id;
        this.his_Url = "http://localhost:5000/data/show?deviceId=" + deviceId;
        request.get(this.his_Url).then(function (response) {
          this.his_message = response.data;
          console.log(this.his_message);
          console.log(this.his_message[0]);
        }.bind(this));
      }
    }
  }
}
</script>

<style scoped>
h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.buttons {
  margin-bottom: 20px;
}

.buttons button {
  padding: 10px 20px;
  margin-right: 10px;
  font-size: 16px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.data-container {
  border: 1px solid #ccc;
  padding: 20px;
}

.data-section {
  margin-bottom: 20px;
}

h3 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul li {
  margin-bottom: 10px;
}

ul li:last-child {
  margin-bottom: 0;
}

</style>
